<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--
			
			请根据province_info和city_info里面的数据实现选择省份后能动态的改变对应的城市
			
		-->
		<!--
			
			1.如何去获取具体的省份值
			2.添加对应下拉框的值
			3.获取用户选中什么省份
			4.获取对应的城市值
			
		-->
		<span>请选择省份:</span>
		<select class="province">
			<option selected="selected" disabled="disabled">请选择省份</option>
		</select>
		<br /><br /><br />
		<span>请选择城市:</span>
		<select class="city"></select>
		<script type="text/javascript">
			var province_info = [
				{ "GD": "广东省" },
				{ "HN": "湖南省" },
				{ "HB": "湖北省" }
			]
			var city_info = {
				"GD": [
					{ "0": "广州市" },
					{ "1": "深圳市" },
					{ "2": "韶关市" },
					{ "3": "佛山市" }
				],
				"HN": [
					{ "0": "长沙市" },
					{ "1": "株洲市" },
					{ "2": "衡阳市" }
				],
				"HB": [
					{ "0": "宜昌市" },
					{ "1": "武汉市" }
				]
			}

			var province = document.querySelector(".province");
			var city = document.querySelector(".city");
			for(var i = 0; i < province_info.length; i++) {
				for(k in province_info[i]) {
					province.innerHTML += "<option value='" + k + "'>" + province_info[i][k] + "</option>"
				}
			}

			province.addEventListener("change", function() {
				var melon = this.value;
				city.innerHTML = "";
				for(var i = 0; i < city_info[melon].length; i++) {
					for(k in city_info[melon][i]) {
						city.innerHTML += "<option value='" + k + "'>" + city_info[melon][i][k] + "</option>"
					}
				}
			})
		</script>
	</body>

</html>